<template>
  <div class="recently_read">
    <headernav :title="title" />
    <!-- 书籍区域 -->
    <div class="container">
      <!-- 书本 -->
      <router-link
        :to="'/reading?id=' + item.id"
        class="books"
        v-for="item in readHistory"
        :key="item.id"
      >
        <!-- 图片 -->
        <div class="img">
          <img v-lazy="item.cover" alt="" />
        </div>
        <!-- 文字 -->
        <div class="text">
          <p class="bookname">{{ item.title }}</p>
          <p class="writer">{{ item.author }}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import headernav from "./headernav.vue";
export default {
  data() {
    return {
      title: "",
    };
  },
  components: { headernav },
  methods: {
    setTile() {
      this.title = this.$route.query.title;
    },
  },
  computed:{
      ...mapState(['readHistory'])
  },
  created() {
    this.setTile();
  },
};
</script>

<style lang="less">
.recently_read {
  padding-top: 40px;
  .books {
    margin-left: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 96px;
    // 最后一本书没有下边框
    &:last-child {
      border: none;
    }
    .img {
      flex: 0 0 74px;
      height: 96px;
      margin-right: 3.7333%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      flex: 1;
      p {
        display: flex;
        height: 50%;
        align-items: center;
        font-size: 14px;
        color: #818181;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .writer {
        font-size: 12px;
        color: #8e8e8e;
      }
    }
  }
}
</style>